<template>
  <panel title="物流信息录入">
    <el-form class="form-horizontal" :model="logisticsDto" :rules="logisticsRules" label-width="150px"
             ref="logisticsForm">
      <el-form-item label="返还客户日期" prop="backTime">
        <el-input v-model="logisticsDto.backTime" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="物流公司名称" prop="logisticsCompany">
        <el-select v-model="logisticsDto.logisticsCompany" placeholder="请选择物流公司"
                   prop="logisticsCompany"
                   filterable="true"
                   reserve-keyword="true"
                   clearable="true">
          <el-option
            v-for="item1 in logisticsCompanyList"
            :key="item1.id"
            :label="item1.name"
            :value="item1.id">
          </el-option>
        </el-select>
        <!--<el-input v-model="logisticsDto.logisticsCompany" auto-complete="off"></el-input>-->
      </el-form-item>
      <el-form-item label="快递单号" prop="logisticsNumber">
        <el-input v-model="logisticsDto.logisticsNumber" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="客户姓名">
        <el-input v-model="logisticsDto.customerName" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="客户地址">
        <el-input v-model="logisticsDto.customerAddress" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="客户联系电话">
        <el-input v-model="logisticsDto.customerTel" :disabled="true"></el-input>
      </el-form-item>
      <!--v-no-more-click为防止重复提交指令-->
      <el-button type="primary" @click="onBtnFinishWorkOrder()" style="float: right;" v-no-more-click>工单完结</el-button>
    </el-form>
  </panel>
</template>

<script>
  import Panel from '@/components/common/Panel'
  import {parseTime} from '@/utils'
  import {apiGetLogisticsCompanyList} from '@/api/dictionary'
  import {apiPostPointReturn} from '@/api/repairs/point/logistics'

  export default {
    components: {
      Panel
    },
    computed: {},
    created() {
      this.apiGetLogisticInfo()
      this.selectedLogisticsCompanyInit()
      this.def()
    },
    data() {
      return {
        customer: {
          id: undefined,
          name: '',
          address: '',
          tel: ''
        },
        logisticsCompanyList: [],
        logisticsDto: {
          applicationIdList: [],
          backTime: parseTime(new Date().getTime(), '{y}-{m}-{d}'),
          logisticsNumber: '',
          logisticsCompany: '',
          customerId: 0
        },
        logisticsRules: {
          logisticsCompany: [
            {required: true, message: '请填写物流公司名', trigger: 'blur'}
          ],
          logisticsNumber: [
            {required: true, message: '请填写物流单号', trigger: 'blur'},
            {max: 255, message: '长度不得超过255字符', trigger: 'blur'}
          ]
        }
        //  batch: this.$route.query.batch
      }
    },
    methods: {
      selectedLogisticsCompanyInit() {
        apiGetLogisticsCompanyList().then(response => {
          let logisticsCompanyList = response.data
          let logisticsCompany = []
          let temp = {}
          for (let i in logisticsCompanyList) {
            if (!temp[logisticsCompanyList[i].name]) {
              temp[logisticsCompanyList[i].name] = logisticsCompanyList[i].id
            }
          }
          for (let k in temp) {
            logisticsCompany.push({'name': k, 'id': temp[k]})
          }
          this.logisticsCompanyList = logisticsCompany
        }).catch(() => {
          this.tableLoadingFlag = false
        })
      },
      apiGetLogisticInfo() {
        let flagList = this.$route.query.flagList[0]
        this.logisticsDto.customerName = flagList[0].customerName
        this.logisticsDto.customerAddress = flagList[0].address
        this.logisticsDto.customerTel = flagList[0].tel
      },
      onBtnFinishWorkOrder() {
        this.$refs['logisticsForm'].validate((valid) => {
          if (valid) {
            apiPostPointReturn(this.logisticsDto).then(() => {
              this.$message({
                showClose: true,
                message: '提交成功',
                type: 'success'
              })
              this.$router.push({
                path: '/repairs/point/return'
              })
            }).catch(() => {
              this.tableLoadingFlag = false
            })
          } else {
            return false
          }
        })
      },
      def() {
        let logisticsList = this.$route.query.flagList[0]
        let num = logisticsList.length
        for (let i = 0; i < num; i++) {
          this.logisticsDto.applicationIdList.push(logisticsList[i].id)
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .panel {
    border: 1px solid #ddd;
    border-radius: 4px;
    .panel-header {
      color: #333;
      border-color: #ddd;
      background-color: #f5f5f5;
      padding: 10px 15px;
      border-bottom: 1px solid #ddd;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
    }
    .form-horizontal {
      max-width: 550px;
      max-height: 80%;
      padding-top: 20px;
      padding-left: 40px;
    }
  }
</style>
